<link rel="stylesheet" href="/assets/home/css/search.css">
<!--上拉刷新，下拉加载  -->
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css">
<!--上拉刷新，下拉加载  -->
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
<!-- 搜索框 -->
<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="请输入课程名称" name="search" id="keywords" />
</div>
<!-- 课程列表 -->
<div class="mescroll" id="mescroll">
    <ul class="mui-table-view">

    </ul>
</div>


<div class="more">没有更多了..</div>

{include file='common/footer' /}
<script>
    let search = $('#keywords').val()
    var mescroll = new MeScroll("mescroll", { 
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            auto: false,
            callback: upCallback, //上拉加载的回调
            page: {
                size: 2 //每页数据条数,默认10
            },
        }
    }
    )
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll()

        $(".mui-table-view").html('')

    }
     // 回车搜索
     $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            search = $("#keywords").val()
            downCallback()
        }
    })
    async function upCallback(val) {
        page = val.num; // 页码, 默认从1开始 如何修改从0开始 ?
        size = val.size;
        let data = {
            page: page,
            limit: size,
            keywords: search
        }
        $.ajax({
            type: 'post',
            url: `{:url('home/subject/search')}`,
            dataType: 'json',
            data: data,
            success: function (result) {
                if (result.code == 0) {
                    mui.toast(result.msg)
                    mescroll.endBySize(0, 0);
                    return false;
                }
                mescroll.endBySize(result.data.list.length, result.data.count);
                ListEvent(result.data.list)
            }
        })

    }
    function ListEvent(list) {
        list.forEach(item => {
            var t =
                `
                <li class="mui-table-view-cell mui-media">
                <a class="item" href="{:url('home/subject/detail')}?subid=${item.id}">
                    <div class="thumb">
                        <img class="img" src="${item.thumbs_text}">
                    </div>
                    <div class="info">
                        <h5 class="title">${item.title}</h5>
                        <p class="content mui-ellipsis">课程分类：${item.category.name}</p>
                        <p class="content mui-ellipsis">创建时间：${item.createtime}</p>
                        <p class="content mui-ellipsis">${item.content_text}</p>
                        <p class="bottom">
                            <span class="like mui-icon mui-icon-starhalf">
                                <span>${item.like_text}</span>
                            </span>
                            <span class="price" style="padding-right:20px;">￥${item.price}</span>
                        </p>
                    </div>
                </a>
            </li>
            `
            $('.mui-table-view').append(t)
        });
    }
</script>